<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>extend 选项</title>
	</head>
	<body>
		<div id="app">
			<h2>extend 选项</h2><hr />
			<p>{{num}}</p>
			<p><button @click="add">add</button></p>
			<hr />
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var extendObj = {
				//扩展的方法名和构造器里的相同时，只执行构造器里面的，扩展的不执行，mixins也是一样的
				updated: function() {			
					console.log('我是vue的扩展updated')
				},
				methods:{
					add:function() {
						return this.num++;
						console.log('我是扩展出来的')
					}
				}
			}
			var vm = new Vue({
				el:'#app',
				data:{
					num: 1,
				},
				methods:{
					add:function() {
						return this.num++;
					}
				},
				extends:extendObj,	//和mixins很像，但是在构造器里mixin:[]是数组形式，
				updated:function() {
					console.log('我是原生的扩展')
				}
			})
		</script>
	</body>
</html>
